<template>
  <div class="dashboard safe-width">
    <div class="left">
      <ul>
        <li v-for="(item, index) in dataList" :key="item._id">
          <item-box :itemData="item" @openDetail="openDetail"></item-box>
        </li>
      </ul>
    </div>
    <div class="right">
      <template v-for="item in allIntros">
        <recommend
          :datas="item"
          @recommendMore="recommendMore"
          @recommendItem="recommendItem">
        </recommend>
      </template>
      <dash-footer></dash-footer>
    </div>
  </div>
</template>

<script>
import itemBox from 'comp/itemBox'
import recommend from 'comp/recommend'
import dashFooter from 'comp/footer'
import { mapActions } from 'vuex'
export default {
  name: "dashboard",
  components: {
    itemBox, recommend, dashFooter
  },
  data () {
    return {
      dataList: null,
      allIntros: [],
      detailsId: -1
    }
  },
  created () {
    this.doGetArticle()
    // this.doGetIntro()
  },
  methods: {
    openDetail (val) { // 打开详细信息
      this.detailsId = val
      this.setDetailsId()
    },
    recommendMore (val) { // 点击专题更多
      console.log(val)
    },
    recommendItem (val) { // 点击单条推荐
      console.log(val)
    },
    doGetArticle () { // 获取文章数据
      this._getArticle({page:1, pageNum: 10})
        .then((res) => {
          console.log(res)
          this.dataList = res.data.result
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    doGetIntro () { // 获取推荐数据
      this._getIntroList({a: 1})
        .then((res) => {
          this.allIntros = res.data.result
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    setDetailsId () {
      this._setDetailsId({id: this.detailsId})
        .then((res) => {
          this.$router.push({name: 'videodetails'})
        })
    },
    ...mapActions(['_getArticle', '_getIntroList', '_setDetailsId'])
  }
}
</script>

<style scoped lang="less">
.dashboard{
  .left{
    width: 74%;
    margin-right: 1%;
    float: left;
  }
  .right{
    width: 25%;
    float: right;
  }
}
</style>
